import React, { useState } from 'react';
import { Search, Copy, ChevronRight } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

const Documentation = () => {
  const { t } = useLanguage();
  const [activeTab, setActiveTab] = useState('getting-started');
  const jsExample = `// Using fetch instead of axios
fetch('https://api.kernelproxy.com/v1/proxies', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    country: 'us',
    city: 'new_york',
    count: 5,
    session_duration: 600
  })
})
.then(response => response.json())
.then(data => {
  console.log(data);
  return data.proxies;
})
.catch(error => {
  console.error('Error fetching proxies:', error);
});`;
  return <div className="w-full bg-white dark:bg-gray-900 transition-colors duration-300">
      {/* Documentation Header */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('documentation.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto mb-8">
            {t('documentation.subtitle')}
          </p>
          <div className="relative max-w-2xl mx-auto">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input type="text" placeholder={t('documentation.searchPlaceholder')} className="pl-12 pr-4 py-3 w-full rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] bg-white/10 dark:bg-gray-700/50 backdrop-blur-sm text-white placeholder-gray-300 dark:placeholder-gray-400 transition-colors duration-300" />
          </div>
        </div>
      </section>
      {/* Documentation Content */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-8">
            {/* Sidebar */}
            <aside className="lg:w-64 flex-shrink-0">
              <nav className="sticky top-24">
                <div className="mb-6">
                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                    {t('documentation.sidebar.gettingStarted')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'getting-started' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('getting-started')}>
                        {t('documentation.sidebar.quickStart')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'authentication' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('authentication')}>
                        {t('documentation.sidebar.authentication')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'proxy-types' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('proxy-types')}>
                        {t('documentation.sidebar.proxyTypes')}
                      </button>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                    {t('documentation.sidebar.apiReference')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'get-proxy' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('get-proxy')}>
                        {t('documentation.sidebar.getProxy')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'list-proxies' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('list-proxies')}>
                        {t('documentation.sidebar.listProxies')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'validate-proxy' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('validate-proxy')}>
                        {t('documentation.sidebar.validateProxy')}
                      </button>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                    {t('documentation.sidebar.guides')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'best-practices' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('best-practices')}>
                        {t('documentation.sidebar.bestPractices')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'error-handling' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('error-handling')}>
                        {t('documentation.sidebar.errorHandling')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'rate-limiting' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('rate-limiting')}>
                        {t('documentation.sidebar.rateLimiting')}
                      </button>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                    {t('documentation.sidebar.sdks')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'javascript-sdk' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('javascript-sdk')}>
                        {t('documentation.sidebar.javascript')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'python-sdk' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('python-sdk')}>
                        {t('documentation.sidebar.python')}
                      </button>
                    </li>
                    <li>
                      <button className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-300 ${activeTab === 'java-sdk' ? 'bg-[#00d4ff]/10 dark:bg-gray-700 text-[#0f1c3f] dark:text-white border-l-2 border-[#00d4ff]' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`} onClick={() => setActiveTab('java-sdk')}>
                        {t('documentation.sidebar.java')}
                      </button>
                    </li>
                  </ul>
                </div>
              </nav>
            </aside>
            {/* Main Content */}
            <div className="flex-grow">
              {activeTab === 'getting-started' && <div>
                  <h1 className="text-3xl font-bold text-[#0f1c3f] dark:text-white mb-6">
                    快速开始
                  </h1>
                  <div className="prose max-w-none">
                    <p className="text-lg text-gray-700 dark:text-gray-300 mb-6">
                      欢迎使用 kernelProxy
                      API。本指南将帮助您快速上手，了解如何获取和使用我们的代理服务。
                    </p>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      前提条件
                    </h2>
                    <ul className="list-disc pl-6 text-gray-700 dark:text-gray-300 mb-6">
                      <li className="mb-2">已注册 kernelProxy 账户</li>
                      <li className="mb-2">
                        获取了 API 密钥（可在控制台的 API 设置中找到）
                      </li>
                    </ul>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      基本流程
                    </h2>
                    <ol className="list-decimal pl-6 text-gray-700 dark:text-gray-300 mb-6">
                      <li className="mb-3">使用 API 密钥进行身份验证</li>
                      <li className="mb-3">请求获取代理</li>
                      <li className="mb-3">在您的应用中使用返回的代理</li>
                    </ol>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      示例请求
                    </h2>
                    <div className="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 rounded-md mb-6 relative border border-gray-200 dark:border-gray-700 transition-colors duration-300">
                      <button className="absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors">
                        <Copy size={18} />
                      </button>
                      <pre className="font-mono text-sm overflow-x-auto">
                        {`curl -X POST https://api.kernelproxy.com/v1/proxies \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "country": "us",
    "city": "new_york",
    "count": 5,
    "session_duration": 600
  }'`}
                      </pre>
                    </div>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      示例响应
                    </h2>
                    <div className="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 rounded-md mb-6 relative border border-gray-200 dark:border-gray-700 transition-colors duration-300">
                      <button className="absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors">
                        <Copy size={18} />
                      </button>
                      <pre className="font-mono text-sm overflow-x-auto">
                        {`{
  "success": true,
  "proxies": [
    {
      "id": "px_1a2b3c4d5e",
      "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334",
      "port": 8080,
      "country": "us",
      "city": "new_york",
      "expires_at": "2023-08-25T14:30:00Z"
    },
    // ... 更多代理
  ]
}`}
                      </pre>
                    </div>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      后续步骤
                    </h2>
                    <p className="text-gray-700 dark:text-gray-300 mb-4">
                      现在您已经了解了基本使用流程，接下来可以：
                    </p>
                    <ul className="space-y-2 mb-6">
                      <li className="flex items-center">
                        <ChevronRight size={16} className="text-[#00d4ff] mr-2" />
                        <button className="text-[#00d4ff] hover:underline" onClick={() => setActiveTab('authentication')}>
                          了解更多关于认证的信息
                        </button>
                      </li>
                      <li className="flex items-center">
                        <ChevronRight size={16} className="text-[#00d4ff] mr-2" />
                        <button className="text-[#00d4ff] hover:underline" onClick={() => setActiveTab('proxy-types')}>
                          探索不同的代理类型
                        </button>
                      </li>
                      <li className="flex items-center">
                        <ChevronRight size={16} className="text-[#00d4ff] mr-2" />
                        <button className="text-[#00d4ff] hover:underline" onClick={() => setActiveTab('best-practices')}>
                          查看使用最佳实践
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>}
              {activeTab === 'get-proxy' && <div>
                  <h1 className="text-3xl font-bold text-[#0f1c3f] dark:text-white mb-6">
                    获取代理 API
                  </h1>
                  <div className="prose max-w-none">
                    <p className="text-lg text-gray-700 dark:text-gray-300 mb-6">
                      使用此 API
                      端点获取新的代理。您可以指定国家、城市等参数来获取符合特定需求的代理。
                    </p>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      请求
                    </h2>
                    <div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-md mb-4">
                      <code className="text-[#0f1c3f] dark:text-white font-bold">POST</code>{' '}
                      <code className="text-gray-700 dark:text-gray-300">/v1/proxies</code>
                    </div>
                    <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mt-6 mb-3">
                      请求头
                    </h3>
                    <table className="min-w-full border border-gray-200 dark:border-gray-700 mb-6">
                      <thead className="bg-gray-50 dark:bg-gray-800">
                        <tr>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            名称
                          </th>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            必填
                          </th>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            描述
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            Authorization
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">是</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            Bearer YOUR_API_KEY
                          </td>
                        </tr>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            Content-Type
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">是</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            application/json
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mt-6 mb-3">
                      请求参数
                    </h3>
                    <table className="min-w-full border border-gray-200 dark:border-gray-700 mb-6">
                      <thead className="bg-gray-50 dark:bg-gray-800">
                        <tr>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            参数
                          </th>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            类型
                          </th>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            必填
                          </th>
                          <th className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
                            描述
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            country
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">string</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">否</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            代理所在国家的 ISO 代码（如 us, jp, de）
                          </td>
                        </tr>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            city
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">string</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">否</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            代理所在城市（如 new_york, tokyo）
                          </td>
                        </tr>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            count
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            integer
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">否</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            请求的代理数量，默认为 1
                          </td>
                        </tr>
                        <tr>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100">
                            session_duration
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            integer
                          </td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">否</td>
                          <td className="py-2 px-4 border-b border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-gray-100">
                            会话持续时间（秒），默认为 600
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <h2 className="text-xl font-bold text-[#0f1c3f] dark:text-white mt-8 mb-4">
                      示例代码
                    </h2>
                    <div className="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 rounded-md mb-6 relative border border-gray-200 dark:border-gray-700 transition-colors duration-300">
                      <button className="absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors">
                        <Copy size={18} />
                      </button>
                      <div className="flex border-b border-gray-300 dark:border-gray-600 mb-3">
                        <button className="px-4 py-2 text-[#00d4ff] border-b-2 border-[#00d4ff]">
                          JavaScript
                        </button>
                        <button className="px-4 py-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
                          Python
                        </button>
                        <button className="px-4 py-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
                          cURL
                        </button>
                      </div>
                      <pre className="font-mono text-sm overflow-x-auto">
                        {jsExample}
                      </pre>
                    </div>
                  </div>
                </div>}
              {/* 其他标签页内容 */}
              {activeTab !== 'getting-started' && activeTab !== 'get-proxy' && <div className="flex items-center justify-center h-64 text-gray-500">
                  选择了 {activeTab} 标签，内容正在建设中...
                </div>}
            </div>
          </div>
        </div>
      </section>
    </div>;
};
export default Documentation;